<style scoped>
</style>
<!-- 对 divider 组件的编辑 -->
<template>
  <div class="videolink-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <el-divider content-position="left">设置</el-divider>
      <el-row style="width:720px;">
        <el-col :span="12">
          <PaddingTop :defValue="data.config.paddingTop" :chgValue="(d)=>{data.config.paddingTop = d}" />
        </el-col>
        <el-col :span="12">
          <PaddingBottom :defValue="data.config.paddingBottom" :chgValue="(d)=>{data.config.paddingBottom = d}" />
        </el-col>
      </el-row>
      <el-row style="width:720px;">
        <el-col :span="12">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="宽度" style="margin-bottom:0px;">
              <el-input @blur="blurConfigWidth" size="mini" style="width:80px;" v-model="data.config.width"
                maxlength="12">
              </el-input>
              <span class="tip-color1">例如：100%或800 </span>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="高度" style="margin-bottom:0px;">
              <el-input @blur="blurConfigHeight" size="mini" style="width:80px;" v-model="data.config.height"
                maxlength="12">
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row style="width:720px;">
        <el-col :span="12">
          <TextAlign :isDisabled="isDisabled" :defValue="data.config.textAlign"
            :chgValue="(d)=>{data.config.textAlign = d}" />
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <el-row style="width: 720px; margin-bottom: 12px;">
        <el-col :span="24">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="视频链接" style="margin-bottom:0px;">
              <el-input type="textarea" size="mini" :rows="3" placeholder="请输入内容" v-model="data.config.iframe">
              </el-input>
              <p style="line-height:24px; color: #909399;">爱奇艺、腾讯视频、哔哩哔哩、优酷网、搜狐视频、Youtube等均可嵌入。视频分享中拷贝通用代码（哔哩哔哩中是嵌入代码）至此便可！</p>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import PaddingTop from '@/components/common/design/dialog/component/formitem/PaddingTop.vue'
import PaddingBottom from '@/components/common/design/dialog/component/formitem/PaddingBottom.vue'
import TextAlign from '@/components/common/design/dialog/component/formitem/TextAlign.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    isDisabled () {
      return /\d+%$/.test(this.data.config.width) && parseInt(this.data.config.width) >= 100
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTVIDEOLINK, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      // coding ...
      if (!this.data.config.width) {
        this.data.config.width = '100%'
      }

      // coding ...
      if (!this.data.config.height) {
        this.data.config.height = '315'
      }

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '120px',
      name: '视频链接',
      bjComponent: null,
      data: null
    }
  },
  watch: {
  },
  methods: {
    blurConfigWidth () {
      let value = this.data.config.width
      if (value === '' || isNaN(parseInt(value))) {
        this.data.config.width = '100%'
      } else {
        if (/\d+%?$/.test(value)) {
          this.data.config.width = value
        } else {
          this.data.config.width = parseInt(value)
        }
      }
    },
    blurConfigHeight () {
      let value = this.data.config.height
      if (value === '' || isNaN(parseInt(value))) {
        this.data.config.height = 315
      } else {
        if (/\d+%?$/.test(value)) {
          this.data.config.height = value
        } else {
          this.data.config.height = parseInt(value)
        }
      }
    },
    // .............
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    PaddingTop,
    PaddingBottom,
    TextAlign
  }
}

</script>
